vue项目每30秒刷新1次接口获取数据 |
您所在的位置:网站首页 › vue 强制刷新 › vue项目每30秒刷新1次接口获取数据 |
在vue.js项目中,我们经常会需要实现轮询,即对数据实时更新的这种需求:每隔xx秒需要刷新一次接口刷新数据。如:每隔30秒请求一次数据 这时候我们就需要用到定时器相关的原理。 我们可以先看看2种常用定时器: setinterval(function(){}, seconds)——隔seconds调用一次函数 settimeout(function(){}, seconds)——只执行函数一次 这么看的话,setinterval会符合我们的业务需求。然而这里也会有些问题: 如果你单纯的使用setinterval的话,会导致页面卡死! 其原因与js引擎线程有关,简单来说就是setinterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死网页。 但是settimeout是自带清除定时器的,因此正确解决方法如下: window.setInterval(() => { setTimeout(fun, 0) }, 30000) // 这里的30000为多少秒刷新的时间 注意:setinterval必须放在外层(在内层会导致页面卡顿直到崩溃),内层配合settimeout(主要是setTimeout是自带清除定时器),即可无限次调用我们的接口啦! |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |